<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/request.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/tool.js"></script>
    <style>
        .w {
            width: 1226px;
            margin: 0 auto;
        }

        .wrapHeader {
            background-color: #f5f5f5;
        }

        .header {
            width: 1226px;
            margin: 0 auto;
            line-height: 40px;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
        }

        .header .header-nav-left {
            display: flex;
        }

        .header .header-nav-left li+li {
            margin-left: 10px;
        }

        .header .header-nav-left li .site-user {
            display: none;
        }

        .product-intro {
            min-height: 500px;
            /* background-color: grey; */
            margin-top: 50px;
            display: flex;
        }

        .preview-wrap {
            width: 400px;
            position: relative;
        }

        .preview-wrap .preview {
            height: 400px;
            background-color: pink;
            position: relative;
        }

        .preview-wrap .preview .shadow {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.4);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .preview-wrap .preview img {
            width: 100%;
        }

        .preview-wrap .preview-scale {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 420px;
            top: 0;
            /* background-color: #6ff; */
            background-color: rgba(125, 255, 255, 0.5);
            overflow: hidden;
            display: none;
        }

        .preview-wrap .preview-scale img {
            width: 800px;
            height: 800px;
            position: absolute;
            left: 0;
            top: 0;
            /* z-index: -1; */
        }

        .itemInfo-wrap {
            margin-left: 20px;
            flex: 1;
            /* background-color: orange; */
        }

        .itemInfo-wrap>div {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="wrapHeader">
        <div class="header">
            <ul class="header-nav-left">
                <li>
                    <div class="site-sign">
                        <a href="./login.html">亲,请登录</a>
                        <a href="./register.html">免费注册</a>
                    </div>
                    <div class="site-user">
                        <a class="site-user-tips" href="javascript:;">欢迎,xxx</a>
                        <a class="site-user-exit" href="javascript:;">退出</a>
                    </div>
                </li>
                <li>
                    <a href="">手机逛淘宝</a>
                </li>
                <li>
                    <a href="">网页无障碍</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- magnifier -->
    <div class="product-intro w">
        <!--relative-->
        <div class="preview-wrap">
            <div class="preview">
                <img class="smallImg" src="../images/girlsmall1.jpg" alt="">
                <div class="shadow"></div>
            </div>
            <!-- <div class="preview-list">
                <ul>
                    <li><img src="" alt=""></li>
                    <li><img src="" alt=""></li>
                    <li><img src="" alt=""></li>
                    <li><img src="" alt=""></li>
                </ul>
            </div> -->
            <div class="preview-scale">
                <img class="bigImg" src="../images/girlbig1.jpg" alt="">
            </div>
        </div>
        <!--absolute-->
        <div class="itemInfo-wrap">
            <div class="title">
                华为nova10 新品手机 搭载鸿蒙系统 10号色 8G+256GB 全网通【含华为66W超级快充】
            </div>
            <div class="shop">
                疆界互联旗舰店
            </div>
            <div class="price">
                ￥ 2919.00
            </div>
            <div class="buy">
                <span class="reduce">-</span>
                <input type="text" class="countInput" value="1">
                <span class="add">+</span>
            </div>
            <div class="addCar">
                <a href="javascript:;" class="addToShopingCar">加入购物车</a>
            </div>
        </div>
    </div>
</body>
<script>

    $(async function () {

        var siteSign = document.getElementsByClassName("site-sign")[0];
        var siteUser = document.getElementsByClassName("site-user")[0];

        var lgc = getCookie("lgc");

        if (lgc) {
            siteSign.remove();
            siteUser.style.display = "block";

            var siteUserTips = siteUser.firstElementChild;
            var siteUserExit = siteUser.lastElementChild;

            siteUserTips.textContent = `欢迎,${lgc}`;
            siteUserExit.onclick = function () {
                delCookie("lgc");
                location.reload();
            }
        }





        var url = urlParamsParse();
        console.log(url);

        var { id } = url;
        if (id) {

            // 对应编号获取数据
            var result = await searchGoosById({ id });
            console.log(result);

            var { status, message, data: { id, title, img, price, comment, list, "curr-shop": currShop } } = result;

            if (status) {
                $(".preview-wrap").html(` <div class="preview">
                    <img class="smallImg" src="${img}" alt="">
                    <div class="shadow"></div>
                </div>
                <div class="preview-list">
                </div>
                <div class="preview-scale">
                    <img class="bigImg" src="${img}" alt="">
                </div>`)
                $(".itemInfo-wrap").html(`<div class="title">
                ${title}
            </div>
            <div class="shop">
                ${currShop}
            </div>
            <div class="price">
                ￥ ${price}
            </div>
            <div class="buy">
                <span class="reduce">-</span>
                <input type="text" class="countInput" value="1">
                <span class="add">+</span>
            </div>
            <div class="addCar">
                <a href="javascript:;" class="addToShopingCar">加入购物车</a>
            </div>`);


                // 等html放到页面中之后在获取元素和绑定事件


            } else {
                location.href = "index.html";
            }



        } else {
            location.href = "index.html";
        }

        // 加入购物车  => 需要知道哪些信息?

        // 谁  买了什么东西   买了多少件?
        // 谁           => 当前登录的用户
        // 买了什么东西  => 商品的id (根据id从goodslist找数据)
        // 买了几件      =>  页面中商品的数量

        $(document).on("click", ".addToShopingCar", async function () {
            console.log("准备加入购物车");

            var lgc = getCookie("lgc"); // 获取登录的用户

            if (lgc) {//用户已登录 => 购买 => 加入数据库
                var buyNum = $(".countInput").val();

                var result = await addToShoppingCar({
                    user: lgc,
                    gid: id,
                    buyNum,
                })
                console.log(result);

                var { status, message } = result;

                if (status) {
                    if (confirm("加入成功,是否跳转购物车?")) {
                        location.href = "./shoppingCar.html";
                    }
                } else {
                    alert(message);
                }
            } else {
                // 没有登录 => 去登录 => 按照正常流程登录成功去主页面 => 有问题?
                // 怎么解决?
                // 跳转登录的同时携带数据 ReturnUrl=当前页面url => 登录页就会有数据?
                // 1. 登录页没有数据ReturnUrl => 去主页面3
                // 2. 有数据  ReturnUrl  => 回ReturnUrl对应的地址
                location.href = "./login.html?ReturnUrl=" + encodeURIComponent(location.href);
            }

        })




    })

</script>

</html>